<template>
	<view class="circleDraw">
		<image class="bgImg" src="https://wx.2024csnl.com/static/mine/lotteryBg.png"></image>
		<view class="contentBox">
			<view class="between">
				<view>
				</view>
				<view class="hintBigBox">
					<view class="hintBox flex" @click="open('popup')">抽奖说明</view>
					<view class="hintBox flex histery" style="z-index: 99;"
						@click.stop="$toPage('/package/mine/participationRecord')">参与记录</view>
				</view>
			</view>
			<!-- 转盘 -->
			<view style="position: relative; padding: 80rpx 0;">
				<image style="position: absolute;height:540rpx ;width:73%;top:-26rpx;left: 13.5%;"
					src="https://wx.2024csnl.com/static/mine/bulb.png"></image>
				<crlottery ref="choujiang" :type="3" :list="list" :height="400" :width="400" @join="open('joinPopup')"
					:isRotate="crRotate" :rotateDuration="duration">
				</crlottery>
			</view>
			<view class="btnBigBox flex">
				<view class="btnBox flex" @click="onShowPopup">报名抽奖</view>
			</view>
			<!-- 历史 -->
			<view class="histeryList">
				<view class="startList" v-for="(item,i) in proceedList" v-if="item.status==0">
					<view class="between startTopBox">
						<view>开奖泌豆：<text>{{item.score}}</text></view>
						<view>已有泌豆：<text>{{item.nowscore}}</text></view>
					</view>
					<view class="starCenterBox">
						<view class="tit">大转盘抽奖结果公布</view>
						<view class="titTwo">公布时间：<text>{{item.createtime}}</text></view>
						<view class="titTwo">已有泌豆：<text style="color: #F22828;">{{item.nowscore}}</text></view>
						<image src="https://wx.2024csnl.com/static/mine/gift.png"></image>
					</view>
				</view>
				<view class="histeryBox">
					<view class="starCenterBox oneHistery" v-for="(item,i) in proceedList" v-if="item.status==1"
						@click="onSkip(`/package/mine/winnerList?stage=${item.stage}`)">
						<view class="statusBox">已结束</view>
						<view class="tit" style="color:#fff;">大转盘抽奖结果公布</view>
						<view class="titTwo" style="color:#fff;">公布时间：
							<text style="color:#fff;">{{item.createtime}}</text>
						</view>
						<view class="titTwo" style="color:#fff;">已有泌豆：<text style="color: #fff;">{{item.score}}</text>
						</view>
						<image src="https://wx.2024csnl.com/static/mine/gift.png"></image>
					</view>
					<view style="text-align: center;color: #999;" v-if="noMoreData&&list.length!=0">没有更多啦~</view>
				</view>
			</view>
		</view>
		<!-- 参加 -->
		<uni-popup ref="joinPopup" type="bottom">
			<view class="joinPopBox">
				<view class="tit">选择参与次数</view>
				<view class=" centerBigBox">
					<view class="btn flex-center subBtn" style="color: #E6E6E6;" v-if="nums==1">一</view>
					<view class="btn flex-center subBtn" v-else @click="onOperation('sub')">一</view>
					<view class="centerBox flex-center">
						<view class="textBox">{{nums}} <text>次</text></view>
						<view style="font-size: 24rpx;">消耗{{info.usescore}}泌豆</view>
					</view>
					<view class="btn flex-center" @click="onOperation('add')">+</view>
				</view>
				<view class="bottomHint">您有{{info.myscore}}泌豆 抽奖次数越多中奖概率越大</view>
				<view class="subMitBtn flex-center" style="margin-bottom: 100rpx;" @click="onCrowPrizeApply">确认</view>
			</view>
		</uni-popup>

		<uni-popup ref="popup" type="center">
			<view class="hintModalBox">
				<view class="title">抽奖说明</view>
				<view class="hint">
					<text>{{info.guize}}</text>
					<view v-if="phoneType">
						苹果公司未以任何方式参与比赛或抽奖活动。
					</view>
				</view>
				<view class="btn flex-center" @click="close('popup')">确认</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		getPrizesMsg,
		getcrowPrizeMsg,
		getRotate,
		crowPrizeApply
	} from "../../api/index.js"
	import crlottery from '@/components/cr-lottery/cr-lottery.vue';
	export default {
		components: {
			crlottery,
		},
		data() {
			return {
				nums: 1, //参与次数
				timer: '',
				lotteryNums: 0, //每日可抽奖次数
				prizeList: [], //中奖列表
				info: '',
				list: [],
				proceedList: [], //众筹列表
				crRotate: false, //是否旋转
				duration: '300000',
				pagenum: 1,
				noMoreData: false,
				innerAudioContext: null,
				canCkick: true, //是否能点击报名抽奖
				recordBack: false, //是否从记录页返回
				phoneType:false,//使用设备
			}
		},
		onReachBottom() {
			this.pagenum += 1
			this.onGetPrizeMsg('bottom')
		},
		onLoad(opt) {
			this.phoneType=uni.getSystemInfoSync().platform == 'ios'
			this.onGetRotate()
			// 一分钟查询一次
			this.timer = setInterval(() => {
				this.crRotate = false
				this.onGetRotate()
			}, this.duration)
		},
		methods: {
			onShowPopup() {
				if (this.canCkick) {
					this.open('joinPopup')
				} else {
					uni.showModal({
						title: '提示',
						content: '活动暂未开放,请稍后再来~',
						showCancel: false,
					});
				}

			},
			playMusic() {
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true; //自动播放
				this.innerAudioContext.loop = true; //循环播放
				this.innerAudioContext.src = 'https://wx.2024csnl.com/static/music.mp3';
				this.innerAudioContext.onPlay(() => { //可以播放事件
					this.playing = !this.innerAudioContext.paused; //查看是否可以自动播放
				});
				this.innerAudioContext.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
			},
			// 抽奖数据
			async onGetPrizeMsg(type) {
				const res = await getcrowPrizeMsg(`s=/ApiChoujiang/xydcjpage&pagenum=${this.pagenum}`)
				const {
					msg,
					data,
					status,
				} = res.data
				if (status == 1) {
					this.list = data.jiangping.map(item => {
						return {
							name: item.mc,
							img: item.pic,
							tp: item.tp, // tp代表奖品类型1是商品4是积分
							jz: item.jz
						}
					})
					type == 'bottom' ? this.proceedList.push(...data.data) : this.proceedList = data.data
					this.pagenum != 1 && data.length == 0 ? this.noMoreData = true : this.noMoreData = false
					this.info = data.info
					if (data.isopen == 0 && type != 'bottom' && type != 'back') {
						this.canCkick = false
						uni.showModal({
							title: '提示',
							content: '活动暂未开放,请稍后再来~',
							showCancel: false,
						});
					}
				} else {
					this.showToast(msg)
				}
			},
			// 是否旋转
			async onGetRotate() {
				const res = await getRotate('s=/ApiChoujiang/zhuan')
				const {
					msg,
					status,
					data,
				} = res.data
				if (status == 1) {
					if (data.zhuan == 1) {
						this.crRotate = true
						console.log(data.zhuan,'data.zhuan',this.crRotate)
					} else {
						this.crRotate = false
						clearInterval(this.timer)
					}
				} else {
					this.showToast(msg)
				}
			},

			onOperation(type) {
				type == 'sub' && this.nums != 1 ? this.nums -= 1 : this.nums += 1
			},
			// 报名
			async onCrowPrizeApply() {
				const res = await crowPrizeApply('s=/ApiChoujiang/signup', {
					num: this.nums
				})
				const {
					msg,
					data,
					status,
				} = res.data
				this.showToast(msg)
				if (status == 1) {
					this.goBack(2000)
				}
				this.close('joinPopup')
			},
			open(n) {
				this.$refs[n].open();
			},
			close(n) {
				this.$refs[n].close();
			},
		},
		onHide() {
			console.log('hide')
			this.crRotate=false
			this.innerAudioContext.pause();
		},
		onUnload() {
			clearInterval(this.timer);
			this.innerAudioContext.stop()
			this.recordBack = false
		},
		onShow() {
			this.onGetRotate()
			uni.$on('recordBack', (data) => {
				this.recordBack = true
			})
			if (!this.recordBack) {
				this.onGetPrizeMsg()
			}
			this.playMusic()
			// 下面两个函数好像都没用
			uni.$on('back', async (data) => {
				this.pagenum = 1
				this.onGetPrizeMsg('back')
			})
			this.$on('join', () => {
				this.open('joinPopup')
			})
		},
	}
</script>


<style lang="scss" scoped>
	.joinPopBox {
		color: #333333;
		background: #fff;
		padding: 60rpx;

		.subMitBtn {
			height: 100rpx;
			color: #fff;
			font-size: 35rpx;
			margin: 80rpx 0 20rpx;

			background: #41644A;
			border-radius: 65rpx;
		}

		.bottomHint {
			text-align: center;
			padding: 10rpx 20rpx;
			color: #FE8E06;
			font-weight: 500;
			font-size: 28rpx;
			background: #FFF5E8;
			border-radius: 40rpx;
		}

		.textBox {
			font-size: 50rpx;
			font-weight: 600;

			text {
				font-size: 30rpx;
				font-weight: 400;
			}
		}

		.centerBigBox {
			margin: 80rpx 40rpx 40rpx;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			border: 1px solid #E6E6E6;
		}

		.centerBox {
			flex-direction: column;
			height: 150rpx;
			border-left: 1px solid #E6E6E6;
			border-right: 1px solid #E6E6E6;
		}

		.btn {
			font-size: 120rpx;
			font-weight: 200;
		}

		.subBtn {
			font-size: 70rpx;
			margin-top: 20rpx;
		}

		.tit {
			text-align: center;
			font-size: 35rpx;
			font-weight: 500;
		}
	}

	.histeryBox {
		.oneHistery {
			margin: 30rpx 30rpx 0;
			position: relative;
			background: linear-gradient(90deg, #CCCCCC, #808080);

			.statusBox {
				position: absolute;
				top: 0;
				right: 0;
				color: #fff;
				background: #B3B3B3;
				border-radius: 0px 30rpx 0px 20rpx;
				padding: 13rpx 24rpx;
			}
		}
	}

	.starCenterBox {
		margin-top: -40rpx;
		border-radius: 30rpx;
		background: #FFE9C8;
		padding: 40rpx 47rpx;

		image {
			width: 200rpx;
			height: 150rpx;
			position: absolute;
			right: 10rpx;
			bottom: 30rpx;
		}

		.tit {
			margin-bottom: 30rpx;
			font-size: 42rpx;
			font-weight: bold;
			color: #8B501F;
		}

		.titTwo {
			font-size: 28rpx;
			color: #CAA87C;
			margin-bottom: 20rpx;

			text {
				color: #835D2D;
			}
		}
	}

	.histeryList {
		background: #41644A;
		padding-bottom: 50rpx;

		.startList {
			position: relative;
			margin: 30rpx;

			.startTopBox {
				background: linear-gradient(0deg, #FFF2B7, #FFD24D);
				color: #FA5819;
				padding: 20rpx 49rpx 60rpx;
				font-size: 30rpx;
				border-radius: 30rpx 30rpx 0 0;

				text {
					color: #EA2F04;
					font-size: 40rpx;
					font-weight: 600;
				}
			}
		}
	}

	.hintModalBox {
		padding: 30rpx;
		border-radius: 30rpx;
		width: 600rpx;
		background: #fff;
		height: 500rpx;
		overflow: auto;
		line-height: 50rpx;
		color: #333333;
		font-size: 32rpx;

		.title {
			color: #F40E2A;
		}

		.hint {
			font-size: 20rpx;
		}

		.btn {
			padding: 20rpx 150rpx;
			height: 60rpx;
			background: #F40E2A;
			color: #FFFFFF;
			border-radius: 20rpx;
		}
	}

	.btnBigBox {
		margin-bottom: 50rpx;
		text-align: center;
		justify-content: center;
		width: 100%;

		.btnBox {
			color: #583F15;
			width: 600rpx;
			height: 100rpx;
			background: linear-gradient(0deg, #FFF2B7, #FFD24D);
			box-shadow: 0 5rpx 16rpx 0 rgba(178, 143, 81, 0.31);
			border-radius: 70rpx;
			align-items: center;
			justify-content: center;
			font-weight: 600;
			font-size: 37rpx;

		}
	}

	.hintBigBox {
		position: relative;

		.histery {
			position: absolute;
			bottom: -85rpx;
		}
	}

	.hintBox {
		color: #F05113;
		border-radius: 30rpx 0 0 30rpx;
		justify-content: center;
		align-items: center;
		font-weight: 500;
		font-size: 32rpx;
		width: 180rpx;
		height: 65rpx;
		background: #FFE0A9;
	}

	.backIcon {
		width: 27rpx;
		height: 48rpx;
		margin-left: 30rpx;
	}

	.circleDraw {
		position: relative;
		background: #F22828;
	}

	.contentBox {
		width: 100%;
		top: 60rpx;
		position: absolute;
	}

	.bgImg {
		width: 100vw;
		min-height: 100vh;
	}
</style>
